<template>
  <div class="warpper">

    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane label="Customer Detailed Sale(by customer)" name="first">
        <customerdetailedsale />
      </el-tab-pane>
      <el-tab-pane label="Customer Detailed Sale(by sales)" name="second">
        <customerdetailedsalebysaleperson />
      </el-tab-pane>
      <el-tab-pane label="Sale Commission" name="third">
        <salecommission />
      </el-tab-pane>
      <el-tab-pane label="Active Customer" name="fourth">
        <sampleactivecustomer />
      </el-tab-pane>
      <el-tab-pane label="Sales Comparison Report" name="fifth">
        <salescomparison />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
  import CURD from "@/mixin/CURD";
  import customerdetailedsale from "@/components/report/customerdetailedsale.vue"
  import sampleactivecustomer from "@/components/report/sampleactivecustomer.vue"
  import salecommission from "@/components/report/salecommission.vue"
  import salescomparison from "@/components/report/salescomparison.vue"
  import customerdetailedsalebysaleperson from "@/components/report/customerdetailedsalebysaleperson.vue"
  export default {
    name: "salereportIndex",
    mixins: [CURD],
    components: {
      customerdetailedsalebysaleperson,
      sampleactivecustomer,
      customerdetailedsale,
      salescomparison,
      salecommission,
    },
    data() {
      return {
        activeName: 'first',
      };
    },
    async created() {

    },
    methods: {

    }
  }
</script>